<template>
	<u-popup mode="center" :show="isShow" @close="close" @open="open" :round="20">
		<view class="popupBox" v-if='!isCancel'>
			<view class="topBox">
				<view class="text_title">惊喜赠送</view>
				<view class="text_center" v-if='isAloneBuy'>您将要单独购买的课程价格已超过系列打包价现可以0元打包购买全系列课程</view>
				<view class="text_center" v-if='isSerivers'>您购买本系列下其他课程累计花费{{costPerice}}元，现可以{{withPerice}}元打包购买全系列课程
				</view>
			</view>
			<!--您将要单独购买的课程价格已超过系列打包价现可以0元打包购买全系列课程-->
			<view class="bottomBox" v-if='isAloneBuy'>
				<view class="left" @click='buyOne'>单独购买课程</view>
				<view class="right" @click='zeroBuy'>0元打包购买</view>
			</view>
			<!-- 您购买本系列下其他课程累计花费xxx元，现可以x元打包购买全系列课程 -->
			<view class="bottomBox" v-if='isSerivers'>
				<view class="left" @click='aloneBuy'>单独购买</view>
				<view class="right" @click='baleBuy'>打包购买</view>
			</view>
		</view>

		<!-- 注销账号弹出--------- -->
		<view class="popupBox" v-else>
			<view class="topBox">
				<view class="text_title">确认要注销吗？</view>
			</view>
			<view class="bottomBox">
				<view class="left"  @click="cancel">取消</view>
				<view class="right" @click='submit'>确认</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		props: {
			//弹出层显示与否
			isShow: {
				type: Boolean,
				default: false
			},
			// 您将要单独购买的课程价格已超过系列打包价现可以0元打包购买全系列课程
			isAloneBuy: {
				type: Boolean,
				default: false
			},
			// 您购买本系列下其他课程累计花费xxx元，现可以x元打包购买全系列课程
			isSerivers: {
				type: Boolean,
				default: false
			},
			// 本系列下其他课程累计花费
			costPerice: {
				type: Number,
				default: 0
			},
			// 现可以x元打包购买全系列课程
			withPerice: {
				type: Number,
				default: 0
			},
			//------个人中心注销账号------------------
			isCancel: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {

			}
		},
		methods: {
			close() {
				console.log('关闭弹出层');
			},
			open() {
				console.log('打开弹出层');
			},
			//单独购买课程
			buyOne() {
				this.$emit('buyOne')
			},
			//0元打包购买
			zeroBuy() {
				this.$emit('zeroBuy')
			},
			//单独购买
			aloneBuy() {
				this.$emit('aloneBuy')
			},
			//打包购买
			baleBuy() {
				this.$emit('baleBuy')
			},
			// -------注销账号逻辑-----------------
			//取消
			cancel() {
				this.$emit('cancel')
			},
			//确认
			submit() {
				this.$emit('submit')
			}

		}
	}
</script>

<style scoped lang="scss">
	.popupBox {
		width: 80vw;
		border-radius: 20rpx;
		font-family: PingFang SC;
        
		.topBox {
			padding: 46rpx 50rpx 56rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.text_title {
				font-size: 34rpx;
				font-weight: bold;
				color: #444444;
				margin-bottom: 45rpx;

			}

			.text_center {
				font-size: 28rpx;
				font-weight: 500;
				color: #999999;
				line-height: 50rpx;
				text-align: center;
			}
		}

		.bottomBox {
			width: 100%;
			height: 76rpx;
			border-top: 1rpx solid rgba(0, 0, 0, .2);
			font-size: 28rpx;
			font-weight: 500;
			display: flex;

			.left,
			.right {
				width: 50%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.left {
				color: #666666;
				border-right: 1rpx solid rgba(0, 0, 0, .2);
			}

			.right {
				color: #194FC9;
			}
		}
	}
</style>
